<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>jQuery FileStyle 1.5.1 - jquery customization input html file</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.css">
		<link href="../src/jquery-filestyle.css" rel="stylesheet" />
		<style>
			body {
				font-family: sans-serif;
				background: #dedede;
			}
			form label {
				width: 150px;
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<h2>Upload Teste</h2>
		<form action="upload.php" enctype="multipart/form-data" method="post">
			<input type="file" name="example" id="input01">
			<button type="submit">
				Enviar
			</button>
		</form>
        
		<h2>With bootstrap and semantic ui icons</h2>
        <form>
            <label>Boostrap icon</label>
			<input type="file" class="jfilestyle" data-buttonText="<span class='glyphicon glyphicon-folder-open'></span>  open"><br>
            <label>Semantic UI icon</label>
			<input type="file" class="jfilestyle" data-buttonText="<i class='alarm icon'></i>  open">
        </form>
		<h2>Options</h2>
		<form>
			<label for="input02">Custom button text</label>
			<input type="file" id="input02">
			<br>

			<label for="input03">No text field</label>
			<input type="file" id="input03">
			<br>

			<label for="input06">Input size</label>
			<input type="file" id="input06">
			<br>
			
			<label for="input07">Placeholder</label>
			<input type="file" id="input07">
			<br>
		</form>

		<h2>Methods</h2>
		<form>
			<label for="input08">Clear</label>
			<input type="file" id="input08">
			<button id="clear" type="button">
				Clear
			</button>
			<br>

			<label for="input09">Toggle input</label>
			<input type="file" id="input09">
			<button id="toggleInput" type="button">
				Toggle input
			</button>
			<br>

			<label for="input12">Destroy</label>
			<input type="file" id="input12">
			<button id="destroy" type="button">
				Destroy
			</button>
			<br>

			<label for="input13">Multiple</label>
			<input type="file" id="input13" multiple="multiple">
			<br>
			
			<label for="input14">Disabled</label>
			<input type="file" id="input14">
			<br>
			
			<label for="input15">Button before</label>
			<input type="file" id="input15">
		</form>

		<h2>Advanced selector jquery</h2>
		<form>
			<input type="file" class="test">
			<br>
			<input type="file" class="test">
			<br>
			<input type="file" class="test">
			<br>
			<input type="file" class="test">
		</form>

		<h2>Data attributes</h2>
		<form>
			<input type="file" class="jfilestyle" data-icon="false">
			<br>
			<input type="file" class="jfilestyle" data-buttonText="Find" data-input="false">
			<br>
			<input type="file" class="jfilestyle" data-size="300px">
			<br>
			<input type="file" class="jfilestyle" data-buttonText="Open">
			<br>
		</form>
		<br>
		<br>
		<br>
		<br>
		<script src="../src/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.js"></script>
		<script type="text/javascript" src="../src/jquery-filestyle.js"></script>
		<script type="text/javascript">
			$('#input01').jfilestyle()

			$('#input02').jfilestyle({
				buttonText : 'My filestyle'
			});

			$('#input03').jfilestyle({
				input : false
			});

			$('#input06').jfilestyle({
				inputSize : '100px'
			});
			
			$('#input07').jfilestyle({
				placeholder: 'My text placeholder'
			});
			$('#input08').jfilestyle();

			$('#clear').click(function() {
				$('#input08').jfilestyle('clear');
			});

			$('#input09').jfilestyle();

			$('#toggleInput').click(function() {
				var fs = $('#input09');
				if (fs.jfilestyle('input'))
					fs.jfilestyle('input', false);
				else
					fs.jfilestyle('input', true);
			});

			$('#input12').jfilestyle({
				theme : 'red'
			});

			$('#input13').jfilestyle();
			$('#input14').jfilestyle({disabled: true});
			$('#input15').jfilestyle({buttonBefore: true});

			$('#destroy').click(function() {
				if ($('#input12').data('jfilestyle')) {
					$('#input12').jfilestyle('destroy');
					$(this).html('Construct');
				} else {
					$('#input12').jfilestyle();
					$(this).html('Destroy');
				}
			});

			$('.test').jfilestyle();
		</script>

	</body>
</html>
